<template>
    <uni-popup 
        background-color="#fff"
        type="bottom" 
        ref="popup" 
        is-mask-click>
        <view class="popup-wrapper" >
            <view class="popup-title">填写内容</view>
            <uni-easyinput
                :maxlength="1000"
                type="textarea" 
                v-model="value" 
                :placeholder="placeholder || '请输入内容'" />
            <view class="btn-group">
                <button  size="mini" @click="cancle">取消</button>
                <button type="primary"  size="mini" @click="ok">确定</button>
            </view>
        </view>
    </uni-popup>
</template>

<script>
    export default {
        name:"editorText",
        props: ['placeholder'],
        data() {
            return {
                value: ''
            };
        },
        methods: {
            open(val) {
                //value进行处理，去掉html标签
                let value = val.replaceAll('<br>', '\n').replace('<p>', '').replace('</p>', '')
                this.value = value
                this.$refs.popup.open()
            },
            close() {
                this.$refs.popup.close()
            },
            ok() {
                this.$emit('change', this.value)
                this.close()
            },
            cancle() {
                this.close()
            }
        }
    }
</script>

<style scoped lang="less">
    .popup-wrapper{
        height: 60vh;
        padding: 28rpx;
        .popup-title{
            padding-bottom: 30rpx;
            text-align: center;
        }
        ::v-deep.uni-easyinput__content-textarea{
            height: 400rpx;
            padding: 20rpx;
        }
        .btn-group{
            display: flex;
            justify-content: space-around;
            padding: 40rpx 0 20rpx;
            uni-button{
                width: 210rpx;
            }
        }
    }
</style>